import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { $t } from '#/locales';
import { convertObsUrlsToKeys, convertKeysToObsUrls } from '#/utils/getImgUrl';
import type {
  ModuleInstance,
  BannerModule,
  ModuleType,
  ModuleData,
  TitleModuleData,
  ContentModuleData,
  TabsModuleData,
  TableModuleData,
  TimelineModuleData,
  BannerModuleData,
  ActiveModule,
  ConfigData
} from '../components/types';

/**
 * 模块管理组合式函数
 */
export function useModuleManager() {
  // 模块实例列表
  const modules = ref<ModuleInstance[]>([]);

  // Banner模块（固定存在）
  const bannerModule = ref<BannerModule | null>(null);

  // 激活的模块状态
  const activeModule = ref<ActiveModule | null>({
    type: 'banner',
    id: 'banner_module',
    moduleData: undefined
  });

  // UI状态
  const previewVisible = ref(false);
  const settingLoading = ref(false);
  const submitLoading = ref(false);
  const saveDraftLoading = ref(false);

  // 计算属性：按顺序排列的模块列表
  const sortedModules = computed(() => {
    return modules.value.slice().sort((a: ModuleInstance, b: ModuleInstance) => a.order - b.order);
  });

  // 生成唯一ID
  const generateId = () => {
    return `module_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
  };

  // 获取模块默认数据
  const getDefaultModuleData = (type: Exclude<ModuleType, 'banner'>): ModuleData => {
    const defaults = {
      title: {
        bgType: 'color' as const,
        bgColor: '#FFFFFF',
        bgImageInfo: { w: 0, h: 144, imgUrl: '' },
        titleInfo: {
          title: '',
          titleUrl: '',
          textStyle: {
            fontSize: 12,
            fontColor: '#191919',
            fontBold: false,
            italic: false,
            underline: false,
            alignCenter: 'center',
            textWidth: 0,
            textHeight: 0,
          }
        },
        descInfo: {
          desc: '',
          textStyle: {
            fontSize: 12,
            fontColor: '#191919',
            fontBold: false,
            italic: false,
            underline: false,
            alignCenter: 'center',
            textWidth: 0,
            textHeight: 0,
          }
        }
      } as TitleModuleData,

      content: {
        bgType: 'color' as const,
        bgColor: '#FFFFFF',
        titleInfo: {
          title: '',
          titleUrl: '',
          textStyle: {
            fontSize: 12,
            fontColor: '#191919',
            fontBold: false,
            italic: false,
            underline: false,
            alignCenter: 'left',
            textWidth: 0,
            textHeight: 0,
          }
        },
        content: ''
      } as ContentModuleData,

      tabs: {
        bgColor: '#FFF',
        textStyle: { size: 14, bold: false },
        list: [
          { id: 1, title: $t(`competition.homePage.defaultData.tabTitle`) + 1 as string, content: '' },
          { id: 2, title: $t(`competition.homePage.defaultData.tabTitle`) + 2 as string, content: '' },
        ],
        active: 0,
      } as TabsModuleData,

      table: {
        bgColor: '#FFFFFF',
        tableConfig: {
          data: [['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', '']],
          config: {
            mergedCells: [],
            cellStyles: [],
            columnWidths: [],
            colHeaders: [$t(`competition.homePage.defaultData.tableHeaderPlaceholder`), $t(`competition.homePage.defaultData.tableHeaderPlaceholder`)]
          }
        }
      } as TableModuleData,

      timeline: {
        bgColor: '#FFFFFF',
        items: [
          { id: 1, title: '', date: '', desc: '', isActive: true },
        ],
      } as TimelineModuleData,
    };

    return JSON.parse(JSON.stringify(defaults[type]));
  };

  // 初始化Banner模块
  const initializeBannerModule = (): BannerModule => {
    const banner: BannerModule = {
      id: 'banner_module',
      type: 'banner',
      data: {
        show: true,
        bannerUrl: '',
        button: {
          show: false,
          text: $t(`competition.homePage.defaultData.signUpNow`),
          color: '#E54D56',
          x: 100,
          y: 100,
          link: '',
          textStyle: {
            fontSize: 12,
            fontColor: '#ffffff',
            fontBold: false,
            italic: false,
            underline: false,
            alignCenter: 'center',
            textWidth: 0,
            textHeight: 0,
          }
        },
      }
    };

    bannerModule.value = banner;
    return banner;
  };

  // 添加模块实例
  const addModule = (type: Exclude<ModuleType, 'banner'>, insertAfterModuleId?: string, insertAfterBanner?: boolean): ModuleInstance => {
    const newModule: ModuleInstance = {
      id: generateId(),
      type,
      order: 0, // 临时设置，后面会重新计算
      data: getDefaultModuleData(type),
      createdAt: Date.now(),
    };

    if (insertAfterBanner) {
      // 在banner后插入（即插入到第一个位置）
      modules.value.unshift(newModule);
    } else if (insertAfterModuleId) {
      // 找到要插入位置的模块索引
      const insertAfterIndex = modules.value.findIndex(m => m.id === insertAfterModuleId);
      if (insertAfterIndex !== -1) {
        // 在指定模块后面插入
        modules.value.splice(insertAfterIndex + 1, 0, newModule);
      } else {
        // 如果没找到指定模块，添加到末尾
        modules.value.push(newModule);
      }
    } else {
      // 没有指定位置，添加到末尾
      modules.value.push(newModule);
    }

    // 重新计算所有模块的 order
    modules.value.forEach((module, idx) => {
      module.order = idx;
    });

    return newModule;
  };

  // 删除模块实例
  const deleteModule = (moduleId: string): boolean => {
    const index = modules.value.findIndex(m => m.id === moduleId);
    if (index > -1) {
      modules.value.splice(index, 1);
      
      // 重新排序
      modules.value.forEach((module, idx) => {
        module.order = idx;
      });
      
      return true;
    }
    return false;
  };

  // 更新模块数据
  const updateModule = (moduleId: string, data: ModuleData): boolean => {
    const module = modules.value.find(m => m.id === moduleId);
    if (module) {
      module.data = data;
      return true;
    }
    return false;
  };

  // 更新Banner数据
  const updateBannerModule = (data: BannerModuleData): boolean => {
    if (bannerModule.value) {
      bannerModule.value.data = data;
      return true;
    }
    return false;
  };

  // 检查模块数据是否有效（非空）
  const hasValidData = (data: any, type: ModuleType): boolean => {
    switch (type) {
      case 'banner':
        return !!(data.bannerUrl);
      case 'title':
        return !!(data.titleInfo?.title || data.descInfo?.desc);
      case 'content':
        return !!(data.titleInfo?.title || data.content);
      case 'tabs':
        return data.list && data.list.length > 0;
      case 'table':
        return data.tableConfig?.data && data.tableConfig.data.length > 0;
      case 'timeline':
        return data.items && data.items.length > 0;
      default:
        return false;
    }
  };

  // 重置所有模块
  const resetModules = () => {
    modules.value = [];
    bannerModule.value = null;
  };

  // 初始化所有数据
  const initializeData = () => {
    resetModules();
    initializeBannerModule();
  };

  // 事件处理函数
  const handleModuleAdd = (type: Exclude<ModuleType, 'banner'>) => {
    let insertAfterModuleId: string | undefined;
    let insertAfterBanner = false;

    // 始终在当前激活模块后面插入新模块
    if (activeModule.value) {
      if (activeModule.value.type === 'banner') {
        // 如果激活的是banner模块，在banner后插入（即在第一个位置插入）
        insertAfterBanner = true;
      } else {
        // 如果激活的是其他模块，在该模块后插入
        insertAfterModuleId = activeModule.value.id;
      }
    }

    const newModule = addModule(type, insertAfterModuleId, insertAfterBanner);
    if (newModule) {
      // 激活新添加的模块
      activeModule.value = {
        type: newModule.type,
        id: newModule.id,
        moduleData: newModule.data
      };
    }
  };

  const handleModuleDelete = (moduleId: string) => {
    // 找到要删除的模块在排序后列表中的索引
    const sortedModulesList = sortedModules.value;
    const moduleIndex = sortedModulesList.findIndex(m => m.id === moduleId);

    const success = deleteModule(moduleId);
    if (success && activeModule.value?.id === moduleId) {
      // 如果删除的是当前激活模块，需要激活其他模块
      if (modules.value.length === 0) {
        // 如果删除后没有模块了，激活banner
        handleBannerActivate();
      } else {
        // 激活被删除模块的上一个模块
        let targetModule: ModuleInstance | null = null;

        if (moduleIndex > 0 && sortedModulesList[moduleIndex - 1]) {
          // 如果不是第一个模块，激活上一个模块
          targetModule = sortedModulesList[moduleIndex - 1]!;
        } else if (sortedModules.value[0]) {
          // 如果是第一个模块，激活新的第一个模块
          targetModule = sortedModules.value[0]!;
        }

        if (targetModule) {
          activeModule.value = {
            type: targetModule.type,
            id: targetModule.id,
            moduleData: targetModule.data
          };
        } else {
          // 如果没有找到合适的模块，激活banner
          handleBannerActivate();
        }
      }
    }
  };

  const handleModuleUpdate = (moduleId: string, data: ModuleData) => {
    const success = updateModule(moduleId, data);
    if (success && activeModule.value?.id === moduleId) {
      // 如果是当前激活模块，同步更新
      activeModule.value.moduleData = data;
    }
  };

  const handleBannerUpdate = (data: BannerModuleData) => {
    const success = updateBannerModule(data);
    if (success && activeModule.value?.type === 'banner') {
      // 如果Banner是当前激活模块，同步更新
      activeModule.value.moduleData = data;
    }
  };

  const handleBannerActivate = () => {
    activeModule.value = {
      type: 'banner',
      id: 'banner_module',
      moduleData: bannerModule.value?.data
    };
  };

  const handleModuleActivate = (type: ActiveModule['type'], id: string, moduleData?: any) => {
    activeModule.value = { type, id, moduleData };
  };

  const handlePreviewAreaClick = (event: Event) => {
    if (event.target === event.currentTarget) {
      activeModule.value = {
        type: 'banner',
        id: 'banner_module',
        moduleData: bannerModule.value?.data
      };
    }
  };

  const handlePreview = () => {
    previewVisible.value = !previewVisible.value;
  };

  // 数据持久化相关
  const getCurrentStateJson = () => {
    const configData: any = {};
    if (bannerModule.value) {
      configData.banner = bannerModule.value.data;
    }
    // 改为列表结构，保持模块的完整信息
    configData.modules = modules.value.map((module: ModuleInstance) => ({
      id: module.id,
      type: module.type,
      order: module.order,
      data: module.data,
      createdAt: module.createdAt
    }));
    return JSON.stringify(configData);
  };

  // 验证必填字段
  const validateRequiredFields = () => {
    // 验证Banner模块
    if (bannerModule.value?.data?.show && !bannerModule.value?.data?.bannerUrl) {
      ElMessage.warning('请上传banner图');
      handleBannerActivate();
      return false;
    }

    // 验证其他模块
    for (const module of modules.value) {
      let hasError = false;

      switch (module.type) {
        case 'title':
          const titleData = module.data as TitleModuleData;
          if (!titleData.titleInfo?.title?.trim()) {
            hasError = true;
          }
          break;

        case 'content':
          const contentData = module.data as ContentModuleData;
          if (!contentData.titleInfo?.title?.trim()) {
            hasError = true;
          }
          break;

        case 'timeline':
          const timelineData = module.data as TimelineModuleData;
          if (timelineData.items && timelineData.items.length > 0) {
            const hasIncompleteItem = timelineData.items.some((item: any) =>
              !item.title?.trim() || !item.date?.trim()
            );
            if (hasIncompleteItem) {
              hasError = true;
            }
          }
          break;

        case 'tabs':
          const tabsData = module.data as TabsModuleData;
          if (!tabsData.list || tabsData.list.length === 0) {
            hasError = true;
          } else {
            const hasEmptyTitle = tabsData.list.some((tab: any) => !tab.title?.trim());
            if (hasEmptyTitle) {
              hasError = true;
            }
          }
          break;

        case 'table':
          const tableData = module.data as TableModuleData;
          if (!tableData.tableConfig?.data || tableData.tableConfig.data.length === 0) {
            hasError = true;
          } else {
            const hasValidData = tableData.tableConfig.data.some((row: any) =>
              row.some((cell: any) => cell && cell.toString().trim())
            );
            if (!hasValidData) {
              hasError = true;
            }
          }
          break;
      }

      // 如果发现错误，激活该模块并返回
      if (hasError) {
        ElMessage.warning('请填写完必填项');
        handleModuleActivate(module.type, module.id, module.data);
        return false;
      }
    }
    return true;
  };

  const buildConfigData = (): ConfigData => {
    const configData: ConfigData = {
      banner: bannerModule.value?.data || {} as BannerModuleData,
      modules: modules.value.map((module: ModuleInstance) => ({
        id: module.id,
        type: module.type,
        order: module.order,
        data: module.data,
        createdAt: module.createdAt
      }))
    };
    return configData;
  };

  const restoreModulesFromConfig = (existingConfig: any) => {
    // 恢复Banner数据
    if (existingConfig.banner && bannerModule.value) {
      bannerModule.value.data = existingConfig.banner;
    }

    // 恢复其他模块
    modules.value = [];
    // 检查是否是新的列表结构
    if (existingConfig.modules && Array.isArray(existingConfig.modules)) {
      // 新的列表结构：直接恢复模块列表
      existingConfig.modules.forEach((moduleConfig: any) => {
        const newModule: ModuleInstance = {
          id: moduleConfig.id || generateId(),
          type: moduleConfig.type,
          order: moduleConfig.order || 0,
          data: moduleConfig.data,
          createdAt: moduleConfig.createdAt || Date.now(),
        };
        modules.value.push(newModule);
      });

      // 重新排序模块
      modules.value.sort((a: ModuleInstance, b: ModuleInstance) => a.order - b.order);
    } else {
      // 向后兼容：处理旧的对象结构
      const moduleTypes = ['title', 'content', 'tabs', 'table', 'timeline'];
      moduleTypes.forEach((type, index) => {
        if (existingConfig[type]) {
          const newModule = addModule(type as Exclude<ModuleType, 'banner'>);
          if (newModule) {
            newModule.data = existingConfig[type];
            newModule.order = index;
          }
        }
      });
    }

    // 设置默认激活状态为Banner
    activeModule.value = {
      type: 'banner',
      id: 'banner_module',
      moduleData: bannerModule.value?.data
    };
  };

  // 处理配置数据中的图片URL转换（保存时将URL转换为key）
  const processConfigDataForSave = async (configData: ConfigData): Promise<ConfigData> => {
    const processedData = JSON.parse(JSON.stringify(configData)); // 深拷贝

    // 处理其他模块中的富文本内容
    if (processedData.modules && Array.isArray(processedData.modules)) {
      for (const module of processedData.modules) {
        if (module.data) {
          // 处理content模块的富文本内容
          if (module.type === 'content' && module.data.content) {
            module.data.content = await convertObsUrlsToKeys(module.data.content);
          }
          // 处理tabs模块的富文本内容
          else if (module.type === 'tabs' && module.data.list && Array.isArray(module.data.list)) {
            for (const tab of module.data.list) {
              if (tab.content) {
                tab.content = await convertObsUrlsToKeys(tab.content);
              }
            }
          }
        }
      }
    }

    return processedData;
  };

  // 处理配置数据中的图片key转换（加载时将key转换为URL）
  const processConfigDataForLoad = async (configData: any): Promise<any> => {
    const processedData = JSON.parse(JSON.stringify(configData)); // 深拷贝

    // 处理其他模块中的富文本内容
    if (processedData.modules && Array.isArray(processedData.modules)) {
      for (const module of processedData.modules) {
        if (module.data) {
          // 处理content模块的富文本内容
          if (module.type === 'content' && module.data.content) {
            module.data.content = await convertKeysToObsUrls(module.data.content);
          }
          // 处理tabs模块的富文本内容
          else if (module.type === 'tabs' && module.data.list && Array.isArray(module.data.list)) {
            for (const tab of module.data.list) {
              if (tab.content) {
                tab.content = await convertKeysToObsUrls(tab.content);
              }
            }
          }
        }
      }
    }

    return processedData;
  };

  return {
    // 状态
    modules,
    sortedModules,
    bannerModule,
    activeModule,
    previewVisible,
    settingLoading,
    submitLoading,
    saveDraftLoading,

    // 核心方法
    addModule,
    deleteModule,
    updateModule,
    updateBannerModule,
    initializeBannerModule,
    hasValidData,
    resetModules,
    initializeData,

    // 事件处理
    handleModuleAdd,
    handleModuleDelete,
    handleModuleUpdate,
    handleBannerUpdate,
    handleBannerActivate,
    handleModuleActivate,
    handlePreviewAreaClick,
    handlePreview,

    // 数据持久化
    getCurrentStateJson,
    validateRequiredFields,
    buildConfigData,
    restoreModulesFromConfig,

    // 图片URL转换
    processConfigDataForSave,
    processConfigDataForLoad,
  };
}
